<template>
  <view class="flex-col page">
    <view class="flex-col section">
      <view class="flex-row items-center section_3">
        <image class="image_4" src="@/static/common/back.png" @click="backToWallet" />
        <text class="font ml-41" :class="[{ text_2: type === '1' }]" @click="changeTab('1')">MSDT</text>
        <text class="font ml-41" :class="[{ text_2: type === '2' }]" @click="changeTab('2')">USDT</text>
        <text class="font ml-41" :class="[{ text_2: type === '3' }]" @click="changeTab('3')">SDT</text>
      </view>
    </view>
    <scroll-view scroll-y :scroll-top="scrollTop" @scroll="onScroll" class="flex-col relative list" ref="scrollViewRef">
      <view class="flex-col mt-12 list-item" v-for="(item, index) in itemsList" :key="index">
        <view class="flex-row justify-between items-center self-stretch">
          <text class="font_2 text_3">{{ item.remarks }}</text>
          <text class="font_3">{{ `${item.type == 2 || item.walletType == 2 ? '-' : '+'} ${item.balance} ${type == 1 ? 'MSDT' : type == 2 ? 'USDT' : 'SDT'}` }}</text>
        </view>
        <text class="mt-14 self-start font_4">{{ item.createTime }}</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { getWalletDetailPage } from '@/service/mine';
import { debounce } from '@/utils/common.js';
export default {
  components: {},
  props: {},
  data() {
    return {
      scrollTop: 0, // 滚动高度:0
      itemsList: [],
      type: '1',
      pageInfo: {
        current: 1,
        pageSize: 15,
        totalSize: 0
      }
    };
  },
  created() {
    this.onScroll = debounce((event) => {
      const clientHeight = this.$refs.scrollViewRef.$el.clientHeight;
      const { scrollTop, scrollHeight } = event.detail;
      this.scrollTop = scrollTop;
      if (scrollTop + clientHeight >= scrollHeight - 10 && this.itemsList.length < this.pageInfo.totalSize) {
        this.pageInfo.current++;
        this.getAllWalletDetailPage();
      }
    }, 1000);
  },
  mounted() {
    this.getAllWalletDetailPage();
  },

  methods: {
    async getAllWalletDetailPage() {
      const res = await getWalletDetailPage({
        pageNum: this.pageInfo.current,
        pageSize: this.pageInfo.pageSize,
        type: this.type
      });
      this.pageInfo.totalSize = res.data.totalItems;
      console.log("----",this.pageInfo.totalSize)
      this.itemsList = [...this.itemsList, ...res.data.list];
      console.log('长度', this.itemsList.length, this.itemsList);
    },

    changeTab(item) {
      this.pageInfo.current = 1;
      this.type = item;
      this.itemsList = [];
      this.getAllWalletDetailPage();
    },
    backToWallet() {
      uni.navigateTo({ url: '/pages/mine/wallet/index' });
    }
  }
};
</script>

<style scoped lang="scss">
.ml-5 {
  margin-left: 10rpx;
}

.ml-41 {
  margin-left: 82rpx;
}

.page {
  background-color: #140c2b;
  height: 100%;
  width: 100%;
  overflow-y: hidden;
  overflow-x: hidden;
  background-image: url('@/static/icons/b-home.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .section {
    // padding-bottom: 648rpx;
    // background-image: url('@/static/icons/b-home.png');
    // background-size: 100% 100%;
    // background-repeat: no-repeat;

    .section_2 {
      padding: 36rpx 32rpx 36rpx 72rpx;
      background-color: #33333300;

      .text {
        color: #ffffff;
        font-size: 24rpx;
        font-family: PingFang SC;
        line-height: 17.8rpx;
      }

      .image {
        width: 34rpx;
        height: 18rpx;
      }

      .image_2 {
        width: 30rpx;
        height: 18rpx;
      }

      .image_3 {
        width: 48rpx;
        height: 22.66rpx;
      }
    }

    .section_3 {
      padding: 16rpx 32rpx;
      background-color: #ffffff00;

      .image_4 {
        border-radius: 16rpx;
        width: 57rpx;
        height: 57rpx;
      }

      .font {
        font-size: 36rpx;
        font-family: PingFang SC;
        line-height: 26.72rpx;
        color: #ffffff80;
      }

      .text_2 {
        color: #ffffff;
      }
    }
  }

  .list {
    // margin-top: -624rpx;
    padding: 32rpx 32rpx;
    overflow-y: auto;
    flex: 1;
    height: 80vh;
    .list-item {
      padding: 32rpx 24rpx;
      background-color: #ffffff26;
      border-radius: 24rpx;

      &:first-child {
        margin-top: 0;
      }

      .font_2 {
        font-size: 28rpx;
        font-family: PingFang SC;
        line-height: 26.72rpx;
        color: #ffffff;
      }

      .text_3 {
        line-height: 26.32rpx;
      }

      .font_3 {
        font-size: 28rpx;
        font-family: PingFang SC;
        line-height: 20.78rpx;
        color: #ed80ff;
      }

      .font_4 {
        font-size: 20rpx;
        font-family: PingFang SC;
        line-height: 14.84rpx;
        color: #ffffff80;
      }
    }
  }
}
</style>
